Skip to content

[ CodeStyle ] Add class conventions#22

Open
jamesnw wants to merge 2 commits into
openui:mainfrom
jamesnw:docs-class-naming
Open

[ CodeStyle ] Add class conventions#22
jamesnw wants to merge 2 commits into
openui:mainfrom
jamesnw:docs-class-naming

Conversation

@jamesnw

@jamesnw jamesnw commented Aug 26, 2025

Copy link
Copy Markdown
Contributor

No description provided.

Comment thread docs/style-guide.md Outdated
Comment thread docs/style-guide.md Outdated
### Class prefixes

In addition to the [global `oui-` namespace](#namespace), OUI uses class prefixes to provide
additional clarity to the job a given class plays. OUI uses the following class

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we want to say “plays a role“ or “has a job”?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I played around with the wording a bit- is it clearer now?

Comment thread docs/style-guide.md
- **c** - for UI components, such as `.oui-c-button`
- **l** - for layout-specific component styles, such as `.oui-l-container`
- **u** - for utilities, such as `.oui-u-margin-bottom-none`
- **is** - for specific states, such as `.oui-is-active`

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- **is** - for specific states, such as `.oui-is-active`
- **is** - for specific states, such as `.oui-is-active`
All classes must use one of these categories.

Should this be a requirement? I'm not thinking of exceptions- sections within a component would still have c, for instance .oui-c-card__header. We may need to add more prefixes in that case.

Comment thread docs/style-guide.md
Comment on lines +89 to +91
In addition to the [`oui-` namespace](#namespace), OUI uses class prefixes to
provide context about the role a class plays within the design system. OUI uses
the following class prefix conventions:

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While there is a definite technological and logical reason to use a prefix for class names, I'm not so sure about the Hungarian Notation on top of that. I'm wondering in what ways it's useful for beginners to have that distinction (that has to be learned first for c, l and u) and if experienced users even need it because they might already know the categorisation by the class name itself.

I could see some points from the disadvantages section on the Hungarian Notation also be brought up by future users, especially around redundancy, readability and deductibility. I'm not sure if it's clear all the time if something belongs to the layout or component category and I could see myself guessing wrong in the heat of the moment.

Are there, besides the added clarity, also technological or other types of benefits to this notation?

On the other hand, the is and has part of the story do make sense to me due to clearly enhanced readability and could also be extended to more verbs (.oui-makes-loopings or whatever).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants